<template>
	<view class="content">

		<view style="display: flex;justify-content: space-between;;align-items: center;margin: 60rpx 24rpx 24rpx 24px;">
			<view style="display: flex;flex-direction: column;">
				<view style="font-size: 36rpx;font-weight: bold;">您好，张师傅</view>
			</view>
			<view style="width: 70rpx;height: 70rpx;border-radius: 99rpx;background: #007AFF;">
				<view style="line-height: 70rpx;width: 100%;text-align: center;color: white;font-weight: bold;">
					张
				</view>
			</view>
		</view>

		<!-- 本月上报 已处理 -->
		<view class="summary_div">
			<view class="summary_item_div">
				<view style="color: #2563EB;font-weight: bold;font-size: 44rpx;">{{stat.month_report}}</view>
				<view style="font-size: 26rpx;">待接单</view>
			</view>
			<view class="summary_item_div">
				<view style="color: #16A34A;font-weight: bold;font-size: 44rpx;">{{stat.month_handle}}</view>
				<view style="font-size: 26rpx;">上报异常</view>
			</view>
			<view class="summary_item_div">
				<view style="color: #2563EB;font-weight: bold;font-size: 44rpx;">{{stat.month_receipt}}</view>
				<view style="font-size: 26rpx;">本月接单</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu_div">
			<view class="menu_item" @click="onOrderList(1)">
				<image class="menu_icon" src="/static/ic_home_schd.png"></image>
				<view class="menu_name">待接单</view>
				<!-- <view class="menu_desc">等待接货</view> -->
				<view class="summary_item_div">
					<view style="color: #2563EB;font-weight: bold;font-size: 40rpx;">{{stat.month_report}}</view>
					<view class="menu_desc">等待处理</view>
				</view>
			</view>
			<view class="menu_item" @click="onOrderList(2)">
				<image class="menu_icon" src="/static/ic_home_lsjl.png"></image>
				<view class="menu_name">待接货</view>
				<!-- <view class="menu_desc">查看上报记录</view> -->
				<view class="summary_item_div">
					<view style="color: #16A34A;font-weight: bold;font-size: 40rpx;">{{stat.month_receipt}}</view>
					<view class="menu_desc">本月完成</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu_div">
			<view class="menu_item" @click="onYcsb">
				<image class="menu_icon" src="/static/ic_home_ycsb.png"></image>
				<view class="menu_name">上报异常</view>
				<view class="menu_desc">交通事故等</view>
			</view>
			<view class="menu_item" @click="onHdList">
				<image class="menu_icon" src="/static/ic_home_hdlb.png"></image>
				<view class="menu_name">负责园区</view>
				<view class="menu_desc">您负责的园区</view>
			</view>
		</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						扫码评价
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">请提示用户扫码评价</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向客户展示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { URL } from '@/http/request.js'
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	import { checkUpdate } from '@/util/uni_util.js'
	const base64 = require('@/util/oss/base64.js')
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				// 统计数据
				stat: {
					month_report: 0, // 本月上报
					month_handle: 0, // 本月处理
					report: 0, // 上报总数
					handle: 0, // 处理总数
					receipt: 0, // 回单总数
					month_receipt: 0, // 月回单数
				},
			}
		},

		onPullDownRefresh() {
			this.getStatistics()
		},

		onShow() {
			// this.getStatistics()
			checkUpdate()
		},

		methods: {

			// 回单列表
			onHdList() {
				uni.navigateTo({ url: '/pages/ycsb/park_list' })
			},
			// 订单列表
			onOrderList(type) {
				uni.navigateTo({ url: `/pages/ycsb/order_list?type=${type}` })
			},
			// 历史记录
			onRecord() {
				uni.navigateTo({ url: '/pages/ycsb/record_list' })
			},
			// 异常上报
			onYcsb() {
				uni.navigateTo({ url: '/pages/ycsb/ycsb' })
			},

			// 查看锁体照片
			onCheckImg(url) {
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},

			// 上传图片
			onUpload(item) {
				uni.showToast({ icon: 'none', title: '上传图片' })
				uni.navigateTo({ url: `/pages/order_detail/order_detail?detail=${JSON.stringify(item)}` })
			},

			// 二维码
			onShowQrCode() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.$refs.popup.close()
			},

			// 生成二维码文本数据
			genQrContent() {
				// const url = 'https://wwwoo.goho.co' // 花生壳测试
				// const url = 'http://192.168.1.2:8080' // 本地ip测试
				const url = 'http://install.niuniuhaohan.com' // 正式站
				return `${url}/#/pages/evaluate/evaluate?install_id=${this.id}`
			},

			// 接口:获取统计数据
			async getStatistics() {
				let that = this
				let token = getUInfo().token
				// uni.showLoading({title: '加载中..', mask: true})
				let res = await that.$getStatistics({ token })
				// console.log('$getStatistics.res = ', res);
				if (res.code == 1) {
					this.stat = res.data
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},

		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		/* background-color: #6974DD; */
		background-color: #F2F2F2;
	}

	.summary_div {
		display: flex;
		justify-content: space-around;
		margin: 0 24rpx 0 24rpx;
		/* background-color: #F1EFF9; */
		background-color: white;
		border-radius: 24rpx;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 48rpx 0 48rpx 0;
	}

	.summary_item_div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.menu_div {
		display: flex;
		width: calc(100% - 48rpx);
		margin: 24rpx 24rpx 0 24rpx;
		justify-content: space-between;
	}

	.menu_item {
		width: calc((100% - 28rpx) / 2);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		/* background: #F1EFF9; */
		background: white;
		border-radius: 24rpx;
		padding: 52rpx 0 52rpx 0;
	}

	.menu_icon {
		width: 62rpx;
		height: 62rpx;
	}

	.menu_name {
		font-size: 32rpx;
		font-weight: bold;
		margin: 24rpx 0 0 0;
	}

	.menu_desc {
		font-size: 24rpx;
		color: #888;
		margin: 4rpx 0 0 0;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 0 0 0;
	}

	.btn1 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: yellowgreen;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn3 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: orangered;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 48vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>